<template>
	<view class="p-30">
		<common-list @load="getLandlordRevenueList" :list="list" :status="status">
			<template #list>
        <view class="item" v-for="(item, i) in list" :key="i" @click="click(item)">
          <text class="font-40 opy-6 line-1">收益来源
            <text class="color-e float-right">¥{{item.div_total_income_with_guarant_income}}</text>
          </text>
          <text class="m-t-20 line-1">{{item.price_time_years}}</text>

        </view>
			</template>
			<template #empty>
				<empty text="列表空空如也～"></empty>
			</template>
		</common-list>
		<Watermark color='#FFF1F1' :watermark="mark" :maxWidth="200" />
	</view>
</template>

<script>
	export default {
		name: "assets",
		data() {
			return {
				list: [],
				status: 'loading',
				page: 1,
			}
		},
		onLoad() {
			this.getLandlordRevenueList()
		},
		onReachBottom() {
			if (this.status === 'nomore') return
			this.getLandlordRevenueList()
		},
		methods: {
			click(item) {
				this.$store.commit('SET_SELECT_ASSETS', item)
				if(item.status == 1){
					uni.$u.route(`/pages/user/assets-details2?id=${item.assets_id}`)
				}else{
					uni.$u.route(`/pages/user/assets-details?id=${item.assets_id}`)
				}
			},
      async getLandlordRevenueList() {
        const {
          page,
          limit
        } = this
        let params = {
          page,
          limit,
        }
        this.status = 'loading'
        const res = await this.$api.common.landlord('getHousingRevenueList', params)

        if (res.code === 200) {
          const {
            count,
            list
          } = res.data

          this.list = [...this.list, ...list]
          if (this.list.length >= count) {
            // 所有数据加载完毕
            this.status = 'nomore'
            return
          }
          // 单次请求数据完毕
          this.status = 'loadmore'
          this.page = this.page + 1
        }
      },
			async getLandlordAssetsList() {
				const {
					page,
					limit
				} = this
				let params = {
					page,
					limit,
				}
				this.status = 'loading'
				const res = await this.$api.common.landlord('getLandlordAssetsList', params)
				if (res.code === 200) {
					const {
						count,
						list
					} = res.data

					for(let i = 0; i<list.length;i++){
						if(list[i]['contract_status'] == 0){
							list[i]['css'] = "bg";
							list[i]['status_str'] = "未签约";
						}else{
							if(list[i]['status'] == 1){
								list[i]['css'] = "bg1";
								list[i]['status_str'] = "运营中";
							}else{
								let arr={'装修准备中':0,'硬装开工':4,'浇筑完工':8,'水电施工中':10,'水电完工':12,'泥瓦施工中':14,'泥瓦完工':16,'油漆施工中':18,'油漆完工':20,'硬装完工':40,'软装配置中':50,'软装完工':60,'验收完成':80};
								
								for(let index in arr){
									if(arr[index]==list[i]['renovation_status']){
										list[i]['status_str'] = index;
										if(arr[index]<60){
											list[i]['css'] = "bg2";
											
										}else{
											list[i]['css'] = "bg3";
										}
										break
									}
									
								}
								

							}
						}
					}
					this.list = [...this.list, ...list]
					if (this.list.length >= count) {
						// 所有数据加载完毕
						this.status = 'nomore'
						return
					}
					// 单次请求数据完毕
					this.status = 'loadmore'
					this.page = this.page + 1
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 176rpx;
		padding: 0 20rpx 0 20rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
    background:  #fff;
    box-shadow: 0px 2px 16px 0px rgba(0,0,0,0.1);
	}

	.bg1 {
		background: url(@/static/images/user/bg_zichan_moni_2@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.bg {
		background: url(@/static/images/user/bg_zichan_moni_hui_2@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.bg2 {
		background: url(@/static/images/user/bg_zichan_moni_huang@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.bg3 {
		background: url(@/static/images/user/bg_zichan_moni_hong@2x.png) 0 0 no-repeat;
		background-size: 100% 100%;
	}
	.zizhan-status{
		position: absolute;
		color:#ff0000;
		font-size: 16px;
	}
	.bg .zizhan-status{
		background-color: #9a9a9a;
	}
	.bg1 .zizhan-status{
		background-color: #FB2D19;
	}
	.bg2 .zizhan-status{
		background-color: #ff9f23;
	}
	.bg3 .zizhan-status{
		background-color: #ff4646;
	}
</style>
